<!DOCTYPE html>
<html>
  <head>
    <title>$.geocomplete()</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>

    <form>
      <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
      <input id="find" type="button" value="find" />
    </form>
    
    <div id="examples">
      Examples:
      <a href="#">Hamburg, Germany</a>
      <a href="#">3rr0r</a>
      <a href="#">Hauptstraße</a>
    </div>
    
    <pre id="logger">Log:</pre>
    
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script src="../jquery.geocomplete.js"></script>
    <script src="logger.js"></script>
    
    <script>
      $(function(){
        
        $("#geocomplete").geocomplete()
          .bind("geocode:result", function(event, result){
            $.log("Result: " + result.formatted_address);
          })
          .bind("geocode:error", function(event, status){
            $.log("ERROR: " + status);
          })
          .bind("geocode:multiple", function(event, results){
            $.log("Multiple: " + results.length + " results found");
          });
        
        $("#find").click(function(){
          $("#geocomplete").trigger("geocode");
        });
        
        
        $("#examples a").click(function(){
          $("#geocomplete").val($(this).text()).trigger("geocode");
          return false;
        });
        
      });
    </script>
  </body>
</html>

